<template>
    <el-dialog v-model="visible" title="进度详情" v-bind="$attrs" @open="dialogOpen" width="50%" @closed="dialogClosed">
        <template #default>
            <el-tabs tab-position="left" class="demo-tabs" v-model="activeName">
                <el-tab-pane label="任务内容" name="content">
                    <div class="content">
                        <div class="text" v-html="scheduleDetail.context"></div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="附件资料" name="static">
                    <el-table :data="scheduleDetail.resource" style="width: 100%" border>
                        <el-table-column label="资源id" prop="id"></el-table-column>
                        <el-table-column label="文件名" prop="name"></el-table-column>
                        <el-table-column label="上传时间" prop="uploadTime">
                            <template #default="{ row }">
                                {{ row && new Date(row.uploadTime).toLocaleString() }}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="{ row }">
                                <el-button
                                    type="primary"
                                    size="default"
                                    @click="download(row.save_path, row.name)"
                                    icon="Download"
                                >
                                    下载
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </template>
        <template #footer>
            <div class="dialog-footer">
                <!-- 该按键只有负责人有 -->
                <el-button
                    type="primary"
                    @click="editSchedule"
                    v-if="subjectStore.currentInfo.status === 0 && subjectStore.authority === 0"
                >
                    编辑该日志
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { defineModel } from "vue";
import { reqScheduleInfo } from "@/api/subject";
import { reqDownload } from "@/api/file";
import type { ScheduleInfo } from "@/api/subject/type";
import { ElMessage } from "element-plus";
import useSubjectStore from "@/store/modules/subject";
// 接收参数
const visible = defineModel();
interface Props {
    schedule: number;
}
const prop = defineProps<Props>();
// 选项卡的页面
const activeName = ref<string>("content");

// 进度的详情内容
const scheduleDetail = ref<ScheduleInfo>({
    context: "",
    resource: [],
});

// 获取日志详情内容
const getScheduleDetail = async () => {
    // 请求数据
    const res = await reqScheduleInfo({
        schedule: prop.schedule,
        subject_id: +subjectStore.currentId,
    });
    if (res.code === 200) {
        if (res.data === null) {
            ElMessage.error("未获取到相关进度信息");
            return;
        } else if (typeof res.data === "object") {
            // 赋值内容
            scheduleDetail.value = res.data;
            return;
        }
    } else {
        ElMessage.error(res.data as string);
    }
};
// 下载文件
const download = async (save_path: string, save_name: string) => {
    const result = await reqDownload(save_path, save_name);
    if (result.code === 200) {
        ElMessage.success(result.data);
    } else {
        ElMessage.error(result.data);
    }
};

// 获取仓库
const subjectStore = useSubjectStore();
// 点击编辑日志
const editSchedule = async () => {
    subjectStore.addUploadWorkPage(prop.schedule);
    // 关闭页面
    visible.value = false;
};

// 窗口打开时的回调
const dialogOpen = async () => {
    getScheduleDetail();
};
// 窗口关闭时的回调
const dialogClosed = () => {
    // 重置数据
    scheduleDetail.value = {
        context: "",
        resource: [],
    };
    activeName.value = "content";
};
</script>

<style lang="scss" scoped>
.content {
    background-color: var(--el-bg-color-overlay);
    border: 1px solid var(--el-border-color-light);

    .text {
        overflow: auto;
        padding: 20px;
        border-radius: 4px;
    }
}
// 模拟descriptions中header的样式
.title {
    font-size: 16px;
    font-weight: 700;
    color: var(--el-text-color-primary);
    margin-bottom: 20px;
}

.dialog-footer {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
</style>
